<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>系统登录</title>
	</head>
	<body>
		<div class="logo_box">
			<img class="logo_img" src="https://fes.qyerstatic.com/fe_ssr_passport/41bd0a522fbeb024a41208a408ca73ec.png" alt="">
			<span class="title">登录</span>
		</div>
		<div class="out_box">
			<div class="login_box">
				<div class="title_tab">
					<ul class="my_ul" style="height: 40px;">
						<li data-num='0'>账号登录</li>
						<li data-num='1'>短信快捷登录</li>
					</ul>
					<span class="underline" style="left: 0px;">账号登录</span>
				</div>
				<div class="login_info_box">
					<div class="login_tip">
						关于穷游网将实行<span style="color: #28b76c;">手机绑定实名制的说明</span>
					</div>
					<div class="input_box account_box">
						<input data-type="account" onblur="checkData(event,'account')" value="18123067401" type="text" class="input" placeholder="手机号">
						<div class="err_tip">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">请输入邮箱/手机号/用户名</span>
						</div>
					</div>
					<div class="input_box password_box">
						<input data-type="password" onblur="checkData(event,'password')" type="text" class="input" placeholder="密码">
						<div class="err_tip">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">请输入6-16位登录密码</span>
							<span class="info">忘记密码</span>
						</div>
					</div>
					<div class="input_box meg_code_box">
						<input data-type="msgCode" type="text" onblur="checkData(event,'msgCode')" class="input" placeholder="验证码">
						<button class="get_msg_code" onclick="toGetMsgCode(1)">获取验证码</button>
						<div class="err_tip">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">请输入6位数字验证码</span>
						</div>
					</div>
					<button class="login_but" onclick="toLogin()">
						登录
					</button>
					<div class="login_auth_box">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FkHhVOT0BMK6LN3mOQ1qACNwKzlI" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FugnPbgTJd9eGwDRpbL4L-bEsZaZ" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FiMZfg-o4O6kGlKgQNBUEbLPY-0A" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FtOA3elXgqZZY7Oa16ZRZt8Jsvnn" alt="">
					</div>
					<div class="bottom_tip register_bottom">
						<span>没有穷游帐号？</span>
						<span style="color: #28b76c;" onclick="loginRegister('register')">立即注册</span>
						<span class="info">境外手机号登录</span>
					</div>
				</div>
			</div>
			<div class="register_box">
				<div class="login_info_box">
					<div class="input_box account_box">
						<input type="text" data-type="phoneNum" onblur="checkData(event,'phoneNum')" class="input iphone" placeholder="手机号">
						<div class="err_tip">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">请输入手机号/用户名</span>
						</div>
					</div>
					<div class="input_box password_box">
						<input type="text" data-type="password" onblur="checkData(event,'password')" class="input" placeholder="密码">
						<div class="err_tip">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">请输入6-16位登录密码</span>
							<span class="info">忘记密码</span>
						</div>
						
					</div>
					<div class="input_box meg_code_box">
						<input type="text" data-type="msgCode" onblur="checkData(event,'msgCode')" class="input" placeholder="验证码">
						<button class="get_msg_code" onclick="getMsgCode(2)">获取验证码</button>
						<div class="err_tip">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">请输入6位数字验证码</span>
						</div>
					</div>
					<button class="login_but" onclick="toRegister()">
						注册
					</button>
					<div class="login_auth_box">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FkHhVOT0BMK6LN3mOQ1qACNwKzlI" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FugnPbgTJd9eGwDRpbL4L-bEsZaZ" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FiMZfg-o4O6kGlKgQNBUEbLPY-0A" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FtOA3elXgqZZY7Oa16ZRZt8Jsvnn" alt="">
					</div>
					<div class="bottom_tip register_bottom">
						<span>已有穷游帐号？</span>
						<span style="color: #28b76c;" onclick="loginRegister('login')">登录</span>
						<span class="info">同意<span style="color: #28b76c;">会员条款</span>和<span
								style="color: #28b76c;">免责声明</span>
						</span>
					</div>
				</div>
			</div>
			<div class="bg_box">
				
			</div>
		</div>
	</body>
</html>
<script type="module">
	
	// 导包
	import userApi from "./api/userApi.js"
	import constants from "./common/constants.js"
	import cacheUtil from "./util/cacheUtil.js"
	
	const validateConfig = constants.VALIDATE_CONFIG
	let tokenconfig = constants.contentType
	
	
	// 页面的dom元素
	const outBox = document.querySelector(".out_box")
	const loginBox = document.querySelector(".login_box")
	const registerBox = document.querySelector(".register_box")
	const bgBox = document.querySelector(".bg_box")
	const underline = document.querySelector(".underline")
	const myUl = document.querySelector(".my_ul")
	const title = document.querySelector(".title")
	
	// 全局变量
	let currentIndex = 0;
	
	// 初始化方法调用
	init()
	
	function init() {
		registerBox.style.display = 'none'
		changeTab(currentIndex)
	}
	
	// 切换登录方式
	myUl.onclick = function(e) {
		changeTab(e.target.getAttribute('data-num'))
	}
	
	outBox.onBlur = function(e){
		console.log(e.target);
	}
	// 切换teb栏
	function changeTab(num) {
		const msgCodeBox = loginBox.querySelector(".meg_code_box")
		const passwordBox = loginBox.querySelector(".password_box")
		const liList = myUl.children;
		liList[currentIndex].classList.remove('li_choosed')
		currentIndex = num
		liList[currentIndex].classList.add('li_choosed')
		underline.style.left = (currentIndex * 165) + 'px'
		if (currentIndex == 0) {
			msgCodeBox.style.display = 'none'
			passwordBox.style.display = 'block'
		} else {
			msgCodeBox.style.display = 'block'
			passwordBox.style.display = 'none'
		}
	}
	
	
	window.onload = function(){
		// 登录注册切换
		this.loginRegister = function(type){
			switch (type){
				case 'register':
					registerBox.style.display = 'block'
					loginBox.style.display = 'none'
					bgBox.style.display = 'none'
					title.innerText = '注册'
					break;
				default:
					registerBox.style.display = 'none'
					loginBox.style.display = 'block'
					bgBox.style.display = 'block'
					title.innerText = '登录'
					break;
			}
		}
		// 获取注册验证码
		this.getMsgCode = function(type){
			const inputBox = registerBox.querySelector('.account_box')
			const inputDom = inputBox.querySelector('input')
			const param = {
				phoneNumber:inputDom.value,
				type:type
			}
			console.log(param);
			userApi.getMsgCode(param).then((data) => {
				console.log(data);
			})
			
		}
	
		
		this.toRegister = function(){
			// const inputBox = registerBox.querySelector('.account_box')
			// const inputDom = inputBox.querySelector('input')
			// const inputBox1 = registerBox.querySelector('.password_box')
			// const inputDom1 = inputBox1.querySelector('input')
			// const inputBox2 = registerBox.querySelector('.meg_code_box')
			// const inputDom2 = inputBox2.querySelector('input')
			
			// // 注册传入内容
			// let registerMsg = {
			// 	account: "",
			// 	msgCode:inputDom2.value,
			// 	password:inputDom1.value,
			// 	phoneNum: inputDom.value
			// }
			// console.log(registerMsg);
			const inputList = registerBox.querySelectorAll('input')
			const param = checkAllData(inputList)
			// 注册请求
			if(param){
				userApi.register(param).then((data1)=>{
					console.log(data1)
					loginRegister('login')
				})
			}
				
			
		}		
		// 获取登录验证码
		this.toGetMsgCode = function(type){
			const inputBox = loginBox.querySelector('.account_box')
			const inputDom = inputBox.querySelector('input')
			const param = {
				phoneNumber:inputDom.value,
				type:type
			}
			console.log(param);
			userApi.getMsgCode(param).then((data) => {
				console.log(data);
			})
			
		}
		
		// 登录
		this.toLogin = function(tokenconfig){
			const inputBox = loginBox.querySelector('.account_box')
			const inputDom = inputBox.querySelector('input')
			const inputBox1 = loginBox.querySelector('.password_box')
			const inputDom1 = inputBox1.querySelector('input')
			const inputBox2 = loginBox.querySelector('.meg_code_box')
			const inputDom2 = inputBox2.querySelector('input')
			
			// 登录传入内容
			let getMsgCode = {
				account:inputDom.value,
				password:inputDom1.value,
				msgCode: inputDom2.value,
				phoneNum:inputDom.value
			}
			console.log(getMsgCode);
			// 登录请求
			if(currentIndex==0){
				userApi.accountLogin(getMsgCode).then((data)=>{
					console.log(data)
					loginSuccess(data)
				})
				// userApi.getUserInfo().then((data1)=>{
				// 	console.log(data1)
				// })
				
			}
			if(currentIndex==1){
				userApi.phoneNumLogin(getMsgCode).then((data)=>{
					console.log(data)
						loginSuccess(data)
				})	
			}
			
		}
		
	
		
		// 输入框的数据校验
		this.checkData = function(e){
			checkInputData(e.target)
		}
	}
	// 登录成功
	function loginSuccess(data){
		cacheUtil.setlocalstroge('userInfo',data)
		window.location.href = './index.html'
	}
	
	// 校验单个的输入框
	function checkInputData(inputDom){
		const value = inputDom.value;
		const type = inputDom.getAttribute('data-type');
		// input 的父级对象parentDom
		const parentDom = inputDom.parentElement
		const errTip = parentDom.querySelector('.err_tip')
		const errInfo = parentDom.querySelector('.err_info')
		if(validateConfig[type].regExp.test(value)){
			// console.log(validateConfig[type].regExp.test(value))
			errTip.style.visibility = 'hidden'
			return true;
		}else{
			errTip.style.visibility = 'visible'
			errInfo.innerText = validateConfig[type].tipInfo
			return false;
		}
	}
	
	// 校验多个输入框的数据
	function checkAllData(inputList){
		let reustl = true
		const param = {}
		for(let val of inputList){
			if(!checkInputData(val)){
				reustl = false
			}
			param[val.getAttribute('data-type')] = val.value
		}
		if(reustl){
			return param
		}
		return result
	}
</script>
<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
		list-style: none;
	}
	body{
		width: 100vw;
		height: 100vh;
		background-image: url(https://fes.qyerstatic.com/fe_ssr_passport/ecb39528d488b6c520f7ddd3898379d6.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.logo_box{
		.logo_img{
			width: 126.5px;
			height: 46px;
		}
		.title{
			font-size: 24px;
			color: #FFFFFF;
			line-height: 46px;
			vertical-align: bottom;
		}
	}
	.out_box{
		display: flex;
		align-items: center;
		margin-top: 40px;
		.login_box,.register_box{
			width: 380px;
			box-sizing: border-box;
			padding: 24px 24px;
			background-color: #FFFFFF;
			.title_tab {
				width: 100%;
				position: relative;
				line-height: 16px;
			}
			
			.title_tab li {
				width: 165px;
				height: 38px;
				text-align: center;
				list-style: none;
				float: left;
				font-size: 16px;
				display: inline-block;
				line-height: 40px;
				border-bottom: 1px solid #e5e5e5;
				overflow: visible;
				cursor: pointer;
			}
			
			.title_tab .li_choosed {
				color: #3f9f5f;
			}
			
			.underline {
				position: absolute;
				width: 165px;
				height: 100%;
				line-height: 30px;
				border-bottom: 2px solid #28b76c;
				bottom: 1px;
				color: hsla(0, 0%, 100%, 0);
				font-size: 18px;
				cursor: pointer;
				transition: left 0.2s linear;
			}
			.login_info_box{
				width: 100%;
				.login_tip {
					width: 100%;
					font-size: 14px;
					line-height: 60px;
					height: 50px;
					color: #959595;
				}
				.input_box {
					.input {
						box-sizing: border-box;
						padding: 3px 7px;
						border: 1px solid #d7d7d7;
						width: 100%;
						height: 40px;
						line-height: 40px;
						font-size: 14px;
						vertical-align: top;
						background: #fff;
						outline: none;
					}
				
					.err_tip {
						height: 30px;
						line-height: 30px;
						color: #ff654c;
						font-size: 12px;
						display: flex;
						align-items: center;
						visibility: hidden;
				
						.err_icon {
							flex-shrink: 0;
							width: 12px;
							height: 12px;
							margin-bottom: -2px;
							margin-right: 4px;
						}
				
						.err_info {
							flex-shrink: 0;
						}
				
						.info {
							width: 100%;
							text-align: end;
							color: #959595;
							cursor: pointer;
						}
					}
				}
				.meg_code_box {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;
				
					.input {
						box-sizing: border-box;
						padding: 3px 7px;
						border: 1px solid #d7d7d7;
						width: 200px;
						height: 40px;
						line-height: 40px;
						font-size: 14px;
						vertical-align: top;
						background: #fff;
						outline: none;
					}
				
					.get_msg_code {
						display: inline-block;
						box-sizing: border-box;
						border: 0;
						padding: 0 15px;
						width: 125px;
						height: 40px;
						line-height: 36px;
						border-radius: 3px;
						font-size: 14px;
						color: #fff;
						cursor: pointer;
						vertical-align: top;
						background-color: #3f9f5f;
					}
				}
				.login_but {
					display: inline-block;
					box-sizing: border-box;
					border: 0;
					padding: 0 15px;
					width: 100%;
					height: 36px;
					line-height: 36px;
					border-radius: 3px;
					font-size: 16px;
					color: #fff;
					cursor: pointer;
					vertical-align: top;
					background-color: #3f9f5f;
				}
				.login_auth_box {
					width: 100%;
					box-sizing: border-box;
					padding: 40px 12px 10px;
					display: flex;
					align-items: center;
					justify-content: space-between;
				
					.auth_icon {
						width: 40px;
						height: 40px;
					}
				}
				
				.bottom_tip {
					width: 100%;
					padding: 10px 0;
					height: 20px;
					line-height: 20px;
					color: #959595;
					font-size: 14px;
					display: flex;
					align-items: center;
					box-sizing: border-box;
				
					.info {
						width: 100%;
						text-align: end;
						flex-shrink: 1;
					}
				}
				
				.bottom_tip span {
					flex-shrink: 0;
				}
			}
		}
		.bg_box {
			background-image: url(https://fes.qyerstatic.com/FoLbAXJtwbB5SVORRmihPFWD-oYM);
			width: 275px;
			height: 100%;
			background-repeat: no-repeat;
			background-position: 50%;
			background-color: #f5f5f5;
			background-size: auto 100%;
			
		}
	}
</style>